import { defineConfig, loadEnv } from "vite";
import type { ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { fileURLToPath } from "url";
// import basicSsl from '@vitejs/plugin-basic-ssl'  // 生成不受信任证书, 供 https 开发使用, 该插件在用户通过带有警告的页面后，仍允许访问该页面

export default defineConfig(({ mode }: ConfigEnv) => {
  // 获取当前工作目录
  const root = process.cwd();
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  const env = loadEnv(mode, root);

  return {
    // 项目根目录
    root,
    // 项目部署的基础路径
    base: env.VITE_BASE_URL,
    publicDir: fileURLToPath(new URL("./public", import.meta.url)), // 无需处理的静态资源位置
    assetsIncludes: fileURLToPath(new URL("./assets", import.meta.url)), // 需要处理的静态资源位置
    // 这里可以添加更多 Vite 配置项
    resolve: {
      // 配置别名
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
        "#": fileURLToPath(new URL("./types", import.meta.url)),
      },
    },
    plugins: [
      // Vue 模版文件编译插件
      vue(),
      // Vue JSX 模版文件编译插件
      vueJsx(),
      // 生成不受信任证书, 供 https 开发使用, 该插件在用户通过带有警告的页面后，仍允许访问该页面
      // basicSsl(),
    ],
    server: {
      // 是否开启 https
      https: undefined,
      // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
      host: true,
      // 开发环境预览服务器端口
      port: 3000,
      // 启动后是否自动打开浏览器
      open: true,
      // 是否开启CORS跨域
      cors: true,
      // 代理服务器，帮助我们开发时解决跨域的问题
      // 默认情况下，代理请求将转发到目标地址的端口 80。
      // 如果目标地址不是80端口，则需要设置target的端口
      proxy: {
        // 这里的意思是 以/api开头发送的请求都会被转发到 http://xxx:9000
        "/api": {
          target: "http://xxx:9000",
          // 改变 Host Header 为目标服务器地址
          changeOrigin: true,
          // 发起请求时 重写请求路径，如下：将 '/api' 替换为 ''
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    build: {
      // 构建输出目录
      outDir: fileURLToPath(new URL("./dist", import.meta.url)),
      // 指定生成静态资源的存放路径（相对于 build.outDir)
      assetsDir: "assets",
      // 构建时是否生成 source map 文件; 如果，关闭 sorcemap 报错不会映射到源码；
      sourcemap: false,
      // 构建时是否生成 manifest 文件；包含了没有被 hash 过的资源文件名和 hash 后版本的映射，然后服务器框架可使用该映射来呈现正确的资源引入链接。
      manifest: true,
      // 规定触发警告的 chunk 大小。（以 kB 为单位)
      chunkSizeWarningLimit: 500,
      // 自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并
      rollupOptions: {
        // 打包入口文件 根目录下的 index.html
        // 也就是项目从哪个文件开始打包
        input: {
          // 打包入口文件，根目录下的 index.html
          index: fileURLToPath(new URL("./index.html", import.meta.url)),
        },
        // 静态资源分类打包
        output: {
          //该选项用于指定生成的 bundle 的格式; 默认为 'es'; 可选值有 'amd'、'cjs'、'es'、'iife'、'umd'、'system'；
          format: 'esm',
          // 该选项用于对代码分割中产生的 chunk 自定义命名
          chunkFileNames: 'static/js/[name]-[hash].js',
          // 该选项用于指定 chunks 的入口文件模式
          entryFileNames: 'static/js/[name]-[hash].js',
          // 自定义构建结果中的静态资源名称
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        }
      },
    },
  };
});
